
<!-- 导航详情页 -->
<template>
  <div>
    <div v-if="lastedProdPagelist!==null">
      <div class="prod-items" v-for="(item) in lastedProdPagelist" :key="item.prodId">
        <div @click="toDetails(item.prodId)">
          <div class="hot-imagecont">
            <img class="hotsaleimg" :src="item.pic" alt />
          </div>
          <div class="hot-text">
            <dir class="hotprod-text">{{item.prodName}}</dir>
            <dir class="prod-text-info">
              <div class="price">
                <span class="symbol">￥</span>
                <span class="big-num">{{item.price}}</span>
                <span class="small-num"></span>
              </div>
            </dir>
          </div>
        </div>
      </div>
    </div>
    <div v-else>暂无数据</div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  methods: {
    ...mapActions({
      homeClassNav: "home/homeClassNav"
    }),
    //    商品详情
    toDetails(id) {
      console.log(id, "id---");
      uni.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`
      });
    }
  },
 
  onLoad(option) {
    this.homeClassNav(option.class);
  },

  computed: {
    ...mapState("home", ["lastedProdPagelist"])
  }
};
</script>

<style scoped>
.prod-items {
  width: 375rpx;
  float: left;
  background: #fff;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}
.prod-items .hot-imagecont {
  border-radius: 8rpx;
  text-align: center;
  font-size: 0;
}
.hot-imagecont .hotsaleimg {
  width: 345rpx;
  height: 345rpx;
  display: inline-block;
  overflow: hidden;
}
.prod-items .hot-text {
  margin-top: 20rpx;
}
.hot-text .hotprod-text {
  height: 76rpx;
  font-size: 28rpx;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
}
.prod-items .hot-text .prod-text-info {
  position: relative;
  height: 50rpx;
  line-height: 70rpx;
  font-family: Arial;
}
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}
.symbol {
  font-size: 24rpx;
}
.big-num {
  font-size: 32rpx;
}
.small-num {
  font-size: 24rpx;
}
</style>